<template>
    <el-dialog custom-class="form-dialog" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="800px" v-loading="loading" destroy-on-close
        :before-close="handleClose">
        <!-- 表单内容 -->
        <div class="form-dialog-content-box">
            <el-form :model="form" label-width="80px" :rules="rules" ref="ruleForm" :size="size">
                <el-form-item label="用户名：" prop="userName">
                    <el-input v-model="form.userName" :size="size"></el-input>
                </el-form-item>
                <el-form-item label="姓名：" prop="nickName">
                    <el-input v-model="form.nickName" :size="size"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password" v-if="title == '新增'">
                    <el-input v-model="form.password" :size="size" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
            </el-form>
        </div>
        <!-- 提交区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancelBtn" :size="size">取 消</el-button>
            <el-button type="primary" @click="handleSubmitBtn" :size="size">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
//引入混入逻辑
import mixin from '@/mixins/form'
export default {
    name: "formDialog",
    mixins: [mixin],
    props: {
        title: {
            type: String,
            default: "新增"
        }
    },
    data() {
        return {
            form: {
                id: "",
                userName: "",
                nickName: "",
                password: "",//密码，新增时有效
                status: 1,//状态 1启用 0停用
            },//表单数据

            rules: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                nickName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
            },//表单验证规则
        }
    },
    methods: {
        //打开对话框
        open(type = "") {
            //编辑模式，移除密码校验
            if(type != "add"){
                this.rules.password[0].required = false
            }else{
                this.rules.password[0].required = true
            }
            //打开对话框
            this.dialogVisible = true
        },
    }
}
</script>

<style scoped lang="scss">
.form-dialog-content-box {
    
}
</style>